<template>
  <view>
    <view class="title" v-if="title">
      <text class="title__h2">{{ title }}</text>
    </view>
    <view class="like">
      <view class="like-list" v-for="item in datalist" :key="item.id" @click="onJump(item)">
        <view class="like-pic"><image class="like-pic__img" mode="aspectFill" :src="formatPic(item.pic, 'orj360')" /></view>
        <text class="like-title">{{ item.title }}</text>
        <text class="like-status" :class="{ 'like-status__today': item.isDate }">{{
          isNumber(item.status) ? '第' + item.status + '话' : item.status
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { formatPic, isNumber } from '@/utils/index'
export default {
  props: {
    datalist: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    formatPic,
    isNumber,
    onJump(item) {
      uni.navigateTo({
        url: item.pid ? `/pages/play/index?id=${item.id}&pid=${item.pid}` : `/pages/subject/index?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/scss/mixin.scss';
.title {
  margin-top: 20rpx;
  padding-left: 20rpx;
  font-size: 32rpx;
}
.like {
  display: flex;
  flex-wrap: wrap;
  &-list {
    width: 225rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
  }
  &-pic {
    position: relative;
    width: 225rpx;
    height: 300rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 3rpx 14rpx 0 hsla(23, 13%, 76%, 0.4);
    z-index: 2;
    &__img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      overflow: auto;
      display: block;
      width: 100%;
    }
  }
  &-title {
    height: 32rpx;
    line-height: 32rpx;
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #333;
    @include clamp(1);
  }
  &-status {
    font-size: 24rpx;
    color: #999;
    &__today {
      color: #0084ff;
    }
  }
}
</style>
